import React from 'react';
import YellowTitle from '../yellowTitle/YellowTitle';
import Season from './season/Season';
import RecentFive from './recentFive/RecentFive';
import Skill from "./skill/Skill";
import HistoryFight from "./historyFight/HistoryFight";

class Statistical extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Statistical';
        //  statisticalMode 4个选择值
        // season 运动员主页的 赛季数据 模式
        // five 运动员主页的 最近5场
        // skill  比赛详情里的技术统计
        // history 比赛详情的历史交锋
        // yellowTitle 的值会通过 showYellowTitle 传给 组件 YellowTitle 设置 yellowTitle 有／没有／值
        this.state = {
            // statisticalMode: "season",
            // statisticalMode: "five",
            // statisticalMode: "skill",
            // statisticalMode: "history",
            statisticalMode: props.mode,
            yellowTitle: props.yellowTitle,
            seasonTitles: [
                "日期",
                "俱乐部",
                "场数",
                "进攻",
                "防守",
                "场均得分"
            ],

            fiveTitles: [
                "日期",
                "对手",
                "进攻",
                "防守",
                "场均得分"
            ],

            skillTitles: [
            "姓名",
            "俱乐部",
            "进攻",
            "防守",
            "场均得分"
            ],
        }
    }

    render() {
        console.log("*********Statistical****render");
        console.log(this.props.data);

        // 显示 yellowTitle 的
        let showYellowTitle = function(title) {
            console.log(title);
            if( title != "" || "undefined"){
                return (<YellowTitle title={title} />);
            }
        }

        // table thead 的 显示
        let showTitleList = function( titleDatas ) {
            let titles = titleDatas.map( function( title, index ) {
                return (
                    <th key={index}>
                        {title}
                    </th>
                )
            })
            return titles;
        }
        console.log(showTitleList(this.state.seasonTitles));

        // 两个table 的显示，mode 可选 season/five/skill
        let showTable = function( mode ) {
            console.log(" showTable");
            if( mode == "season" ) {
                return (
                    <table className="season">
                        <thead>
                            <tr>
                            {showTitleList(this.state.seasonTitles)}
                            </tr>
                        </thead>
                        <Season data={this.props.data} />
                    </table >
                )
            } else if( mode == "five" ) {
                return (
                    <table className="five">
                        <thead>
                            <tr>
                             {showTitleList(this.state.fiveTitles)}
                            </tr>
                        </thead>
                        <RecentFive data={this.props.data} />
                    </table >
                )
            } else if(mode == "skill" ){
                return (
                    <table className="skill">
                        <thead>
                            <tr>
                             {showTitleList(this.state.skillTitles)}
                            </tr>
                        </thead>
                        <Skill data={this.props.data} />
                    </table >
                )
            } else {
                return (
                    <table className="history">
                        <HistoryFight data={this.props.data}/>
                    </table >
                )
            }
        }.bind( this)

        return (
            <div className="statistical">
                {showYellowTitle(this.state.yellowTitle)}
                {showTable(this.state.statisticalMode)}
            </div>
        );
    }
}

export default Statistical;
